<template>
	<view class="">
		<nav-bar leftIcon="" title="付款" color="#222" backgroundColor="rgba(255,255,255,0)" navbarbg="rgba(255,255,255,0)">
			
		</nav-bar>
		<view class="paycont" >
			<view class="top u-flex u-flex-between u-flex-y-center">
				<view class="t1" v-if="consumecode">
					余额 <text> ¥{{balance}}</text>
				</view>
				<view class="t1" v-if="!consumecode">
				</view>
				<view class="t2 u-flex" @click="goTo('/pages/pay/recharge')"  v-if="consumecode">
					<text>立即充值</text>
					<w-icon type="more" color="#fff" size="32rpx"></w-icon>
				</view>
				<view class="t2 u-flex" @click="goTo('/subpkg/my/unbind')"  v-if="!consumecode">
					<text>去绑卡</text>
					<w-icon type="more" color="#fff" size="32rpx"></w-icon>
				</view>
			</view>
			<view class="t3">
				<view class="code1">
					<view class="t3_1">
						<image src="/static/img/m_c2.png" alt="" >
					</view>
					<view class="p">{{consumecode}}</view>
				</view>
				<view class="code2"  v-if="consumecode">
					<a-qrcode :options="qrcode" ref="qrcode">
						
					</a-qrcode>
				</view>
				<view class="t4" @click="refresh"  v-if="consumecode"><text>刷新</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar.vue'
	import wIcon from '@/components/w-icon.vue'
	var timer = null;
	export default{
		components:{
			wIcon,
			navBar
		},
		data() {
		 
			return {
				balance:"",
				imgUrl:this.imgUrl,
				show:false,
				rechargeArray:["200","300","500","1000"],
				selectid:0,
				NO:"",
				consumecode:"",
				bar: {
					code: '',
					color:['#333'], // 条形码的颜色
					bgColor: '#FFFFFF', // 背景色
					width: 420, // 宽度
					height: 134 // 高度
				},
				qrcode:{
					code: '',
					size: 300, // 二维码大小
				},
			}
		},
		computed: {
		  
		},
		beforeCreate(){
			
		},
		 created() {
			this.refresh()
			
		},
		mounted() {
			
		},
		methods: {
			refresh(){
				this.getMyCard().then(()=>{
					this.Getconsumecode()
				}).then(()=>{
					// timer = setInterval(()=>{
						// this.Checkconsumecode()
					// },1000)
				})
			},
			changeItem(index){
				this.selectid = index;
			},
			open() {
				this.show = true;
				clearInterval(timer)
			},
			close() {
				this.show = false
				this.refresh()
			},
			getMyCard(){
				let p = new Promise((resolve,reject)=>{
					this.$http.GetMyCard({
							
					}).then(res => {
						if(res.code==0){
							if(res.content[0]&&res.content[0].cardno){
								this.NO = res.content[0].cardno
								this.balance = res.content[0].totalmoney
								resolve();
							}
						}else{
							// uni.showToast({
							// 	title:res.msg,
							// 	icon:"none"
							// })
						}
					})
				})
				return p;
			},
			Getconsumecode(){
				this.$http.Getconsumecode({
					cardno:this.NO
				}).then(res => {
					if(res.code==0){
						this.consumecode = res.content.consumecode
						this.NO = res.content.cardno
						this.bar.code = this.consumecode
						this.qrcode.code = this.consumecode
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				})
			},
			Checkconsumecode(){
				this.$http.Checkconsumecode({
					cardno:this.cardno,
					consumecode:this.consumecode
				}).then(res => {
					if(res.code==0){
						if(this.NO==res.content.cardno&&this.consumecode==res.content.consumecode){
							this.NO = res.content.cardno
							this.consumecode = res.content.consumecode
							this.bar.code = this.consumecode
							this.qrcode.code = this.consumecode
						}
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						clearInterval(timer)
						timer = null;
					}
				})
			},
			GetBalance(){
				this.$http.GetMyCard({
					cardno:this.cardno,
				}).then(res => {
					if(res.code==0){
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				})
			},
			payfor(){
				var that = this;
				var money = this.rechargeArray[this.selectid]
				// this.getOpenId().then((result)=>{
					this.$http.PaymentRequest({
						chargemoney:money,
						// chargemoney:"0.01",
						mobile:uni.getStorageSync("userInfo").mobile,
						operationMethod:1,
						paytype:4,
						billNO:this.NO
					}).then(res => {
						if(res.code==0){
							var payData = res.content;
							payData = JSON.parse(payData)
							uni.requestPayment({
								provider: "wxpay",
								timeStamp: payData.timeStamp.toString(),
								nonceStr: payData.nonceStr,
								package: payData.package,
								signType: payData.signType,
								paySign: payData.paySign,
								success: res => {
									uni.showToast({
										title:"成功充值"+money+'元',
										icon:"none"
									})
									that.getMyCard();
								},
								fail: res => {
									uni.showToast({
										title:res.msg,
										icon:"none"
									})
								},
								complete: res => {
									console.log(res)
									uni.showToast({
										title:res.msg,
										icon:"none"
									})
								}
							});
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						}
					})
				// })
				
			}
		},
		beforeDestroy() {
			clearInterval(timer)
			timer = null;
		}
	}
</script>

<style lang="scss" scoped>
	.paycont{
		width: 600rpx;
		padding-bottom: 40upx;
		// height: 840rpx;
		margin: 50rpx auto;background: #fff;
		border-radius: 16rpx;
		.top{
			height: 100rpx;padding: 0 30rpx;
			background:#222 ;color: #fff;
			.t1{
				font-size: 32rpx;
			}
			.t2{
				line-height: 100rpx;
				font-size: 28rpx;
			}
		}
		.t3{
			border-top: 10rpx solid #1E7166;
			.code1{
				margin: 65rpx auto 0;
				width: 420rpx;
				.t3_1{
					width: 100%;
					height: 134rpx;
					// background: url('/static/img/m_c2.png') no-repeat 420rpx 134rpx/100%;
					image{
						width:100%;height:100%;
					}
				}
				.p{
					text-align: center;margin-top: 15rpx;font-size: 24rpx;color: #888;letter-spacing: 6rpx;
				}
			}	
			.code2{
				width: 300rpx;height: 300rpx;margin: 46rpx auto;
				image{
					width:100%;height:100%;
				}
			}
			.t4{
				text-align: center;margin-top: 55rpx;color: #BFB49B;font-size: 24rpx;
			}
		}
	}
	
	.recharge{
		height: 750rpx;padding:0 30rpx;background: #fff;
		.head{
			text-align: center;font-size: 40rpx;columns: #222;line-height: 80rpx;
		}
		.t1{
			font-size: 32rpx;color: #888;line-height: 70rpx;
		}
		.t2{
			.item{
				width: 160rpx;
				height: 140rpx;margin-right: 16rpx;
				background: #fff;
				box-shadow: 0px -10rpx 16rpx 0px rgba(204,204,204,0.29);
				border-radius: 20rpx;
				color: #222;text-align: center;line-height: 140rpx;
				border: 1px solid rgba(204,204,204,0.5);
				margin-bottom:20rpx ;
				
				&:nth-child(4n){
					margin-right: 0;
				}
			}
			.active{
				background:#222 ;color: #fff;
			}
		}
		
		.mt30{margin-top: 30rpx;}
		.paym{
			.l{
				font-size: 28rpx;color: #222;
				image{
					width: 40rpx;height: 40rpx;margin-right: 20rpx;
				}
			}
			.r{
				image{
					width: 40rpx;height: 40rpx;
				}
			}
		}
		.f_b{
			position: absolute;bottom: 50rpx;left: 60rpx;
		}
	}
	
</style>